import styled from 'styled-components';
import React from 'react';
import {Editor} from 'components/Editor';

const Wrapper = styled.section`
  font-size:14px;
  background: #e9e9e9;
`;

type Props = {
  value: string;
  onNoteChange: (newValue: string) => void;
  createdAt: string;
  today: string;
  onDateChange: (newValue: string) => void;
}

const NotesSection: React.FC<Props> = (props) => {
  const notes = props.value;

  return (
    <Wrapper>
      <Editor label="日期" type="date" value={props.createdAt} max={props.today}
              onChange={(e) => props.onDateChange(e.target.value)}/>
      <Editor label="备注" type="text" placeholder="在这里添加备注" value={notes}
              onChange={(e) =>
                props.onNoteChange(e.target.value)}/>
    </Wrapper>
  );
};

export {NotesSection};